<template>
    <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick" />
  </template>
  
  <script lang="ts" setup>
  interface Tree {
    label: string
    children?: Tree[]
  }
  
  const handleNodeClick = (data: Tree) => {
    console.log(data)
  }
  
  const data: Tree[] = [
    {
      label: 'Level one 1',
      children: [
        {
          label: 'Level two 1-1',
          children: [
            {
              label: 'Level three 1-1-1',
            },
          ],
        },
      ],
    },
    {
      label: 'Level one 2',
      children: [
        {
          label: 'Level two 2-1',
          children: [
            {
              label: 'Level three 2-1-1',
            },
          ],
        },
        {
          label: 'Level two 2-2',
          children: [
            {
              label: 'Level three 2-2-1',
            },
          ],
        },
      ],
    },
    {
      label: 'Level one 3',
      children: [
        {
          label: 'Level two 3-1',
          children: [
            {
              label: 'Level three 3-1-1',
            },
          ],
        },
        {
          label: 'Level two 3-2',
          children: [
            {
              label: 'Level three 3-2-1',
            },
          ],
        },
      ],
    },
  ]
  
  const defaultProps = {
    children: 'children',
    label: 'label',
  }
  </script>
  <style scoped lang="less">
  .el-tree {
    border: 1px solid #f61
  }
</style>
  